<template>
    <div class="city top-page">
        <div class="top">
            <!-- show-action:显示 “取消”  -->
            <van-search shape="round" v-model="value" show-action placeholder="城市/区域/位置" @search="onSearch"
                @cancel="onCancel" />
            <van-tabs v-model:active="TabActive">
                <template v-for="(value, key, index) in allCity">
                    <van-tab :title="value.title" :name="key"></van-tab>
                </template>
            </van-tabs>
        </div>
        <div class="content">
            <template v-for="(value, key, index) in allCity">
                <currentGroupCity v-show="key===TabActive" :current-group="value" />
            </template>
        </div>
    </div>
</template>

<script setup>
import { computed, ref } from 'vue';
import { showToast } from 'vant';
import useCityStore from '@/store/modules/city'
import { storeToRefs } from 'pinia';
import currentGroupCity from './cpns/currentGroupCity.vue';
import { useRouter } from 'vue-router';

const router=useRouter()

const value = ref('');
const TabActive = ref(0);
const onSearch = (val) => showToast(val);
const onCancel = () => {
    showToast('取消');
    router.back()
}

// tabs的数据
const cityStore = useCityStore()
cityStore.fetchAllCity()
// cityStore是响应式的
const { allCity } = storeToRefs(cityStore)
// console.log(allCity)

// currentGroup:当前选了哪个tab,是key值 
// allCity和TabActive都是响应式,因此要用value取到值
// computed:依赖的东西改变则重新计算,相当于令currentGroup响应式,否则它是写死的（只算一次）
const currentGroup = computed(() => allCity.value[TabActive.value])

console.log(currentGroup)
</script>

<style lang="less" scoped>
.top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    // 不被indexBar挡住
    z-index: 9;
}

.content {
    margin-top: 98px;
}
</style>